<template>
	<view class="cart">
		<!-- 购物车为空 S -->
		<view v-if="cartList.length === 0" class="empty">
			<image class="icongouwuche" src="../../static/home.png" mode="widthFix"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../classify/classify-index/index"
					open-type="switchTab">随便逛逛</navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator">
					登录/注册 >
				</view>
			</view>
		</view>
		<!-- 购物车为空 E -->
		<!-- 购物车列表 S -->
		<view class="goods-list" v-else>
			<view class="btn-clear">
				<view class="">
					<!-- 共0件宝贝 -->
				</view>
				<view class="" @click="chooseSwitchover">
					{{adminShow? '完成': '编辑'}}
				</view>
			</view>
			<view class="yh-cart-row">
				<!-- 商品列表 S -->
				<block v-for="(item, index) in cartList" :key="index">
					<view class="carrier">
						<view class="shop">
							<view class="left">
								<image v-if="item.isShop" class="select" :src="selectPitchOn" mode="widthFix"
									@click="chooseShopSelect(index)"></image>
								<image v-if="!item.isShop" class="select" :src="selectDefault" mode="widthFix"
									@click="chooseShopSelect(index)"></image>
								<view class="shop-name">
									<!-- <image class="icon-shop" :src="shopImage" mode="widthFix"></image> -->
									<view class="name">
										{{item.shop_name}}
									</view>
								</view>
							</view>
							<!-- <image class="right" :src="rightImage" mode="widthFix"></image> -->
						</view>
						<view class="goods" v-for="(gItem, gIndex) in item.goods" :key="gIndex"
							v-if="gItem.goods_sold_out == 1">
							<view class="left">
								<image class="select" :src="gItem.selected ? selectPitchOn:selectDefault"
									mode="widthFix" @click="chooseGoodsSelect(index, gIndex)"></image>
							</view>
							<view class="right">
								<image class="goods-image" :src="gItem.goods_cover || errirImage"></image>
								<view class="goods-info">
									<view class="goods-name">
										{{gItem.goods_name}}
									</view>
									<view class="specification" @click="specificationSelection(index, gIndex)">
										<view class="specification-name">
											{{gItem.goods_specification != ''? gItem.goods_specification: ''}}
										</view>
										<!-- <block v-if="gItem.goods_specification != ''">
											<image class="specification-image" v-if="isSelection" :src="upImage" mode="widthFix"></image>
											<image class="specification-image" v-if="!isSelection" :src="downImage" mode="widthFix"></image>
										</block> -->
									</view>
									<view class="goods-price">
										<view class="price">
											<block v-if="gItem.goods_price != ''">
												<text class="price-symbol">¥</text>
												<text class="price-marked">{{gItem.goods_price}}</text>
											</block>
										</view>
										<view class="amount">
											<view class="num-minus" @click="chooseMinus(index, gIndex)">
												-
											</view>
											<view class="input-price">
												{{gItem.goods_num}}
											</view>
											<view class="num-add" @click="chooseAddNum(index, gIndex)">
												+
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 商品列表 E -->
			</view>
			<view class="yh-cart-row">
				<!-- 失效商品列表 S -->

				<view class="carrier">
					<view class="carrier-title" v-if="goodsLoseEfficacy.length != 0">
						<text class="goods-lose-efficacy-num">
							失效宝贝1件
						</text>
						<text class="goods-lose-efficacy-operation" @click="chooseLoseEfficacyGoodsEmpty">
							清空失效宝贝
						</text>
					</view>
					<view class="goods" v-for="(gItem, gIndex) in goodsLoseEfficacy" :key="gIndex"
						v-if="gItem.goods_sold_out == 0">
						<view class="left">
							<!-- <image class="select" :src="selectDefault" mode="widthFix"></image> -->
						</view>
						<view class="right">
							<image class="goods-image" :src="gItem.goods_cover || errirImage"></image>
							<view class="goods-info-s">
								<text class="goods-names">
									{{gItem.goods_name}}
								</text>
								<view class="specification" @click="specificationSelection">

								</view>
								<view class="goods-price">
									<view class="goods-cause">
										{{gItem.cause}}
									</view>
									<view class="goods-similarity">
										找相似
									</view>
								</view>
							</view>
						</view>
						<image class="goods-lose-efficacy-identifying" :src="loseEfficacyImage" mode="widthFix"></image>
					</view>
				</view>
				<!-- 失效商品列表 E -->
			</view>
		</view>
		<!-- 购物车列表 E -->
		<!-- 购物车结算 S -->
		<view class="goods-settle-accounts">
			<view class="left">
				<image v-if="isCheckAll" class="select" :src="selectPitchOn" mode="widthFix" @click="chooseCheckAll">
				</image>
				<image v-if="!isCheckAll" class="select" :src="selectDefault" mode="widthFix" @click="chooseCheckAll">
				</image>
				全选
			</view>
			<view class="right">
				<block v-if="!adminShow">
					<view class="goods-price-total">
						<text>合计: </text>
						<text>¥ {{total}}</text>
					</view>
					<view class="goods-count-btn">
						结算
					</view>
				</block>
				<block v-if="adminShow">
					<!-- <view class="goods-enshrine" @click="chooseGoodsEnshrine">
						移至收藏夹
					</view> -->
					<view class="goods-delete" @click="chooseGoodsDelete">
						删除
					</view>
				</block>
			</view>
		</view>
		<!-- 购物车结算 E -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				errirImage: '../../static/logo.png',
				rightImage: '../../static/home.png', // 右箭头图标
				shopImage: '../../static/home.png', // 店铺图标
				selectDefault: '../../static/icon1.png', // 默认图标 
				selectPitchOn: '../../static/icon2.png', // 选中图标
				upImage: '../../static/home.png', // 上
				downImage: '../../static/home.png', // 下
				loseEfficacyImage: '../../static/home.png', // 失效
				cartList: [{
					shop_name: "票",
					isShop: false,
					goods: [ // 购物车数据列表
						{
							goods_name: "内馆游泳门票",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "场次：不限",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
						}
					]
				}, {
					shop_name: "卡",
					isShop: false,
					goods: [ // 购物车数据列表
						{
							goods_name: "内馆100次卡",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 5,
							goods_specification: "场次：星期一|星期二|星期三|星期四|星期五|星期六|星期日",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
						},
						{
							goods_name: "内馆私教一对三20次（教练）",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "场次：星期一|星期二|星期三|星期四|星期五|星期六|星期日",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
						}
					]
				}],
				goodsLoseEfficacy: [],
				total: 0, // 选中商品总价
				hasLogin: null,
				// 控制滑动效果
				adminShow: false, // 编辑选择默认false
				isStop: false, // 店铺下所有商品全选/取消全选默认false
				isSelection: false, // 规格选择默认false
				isCheckAll: false, // 购物车全选/反选默认false
			}
		},
		methods: {
			// 编辑按钮切换
			chooseSwitchover() {
				this.adminShow = !this.adminShow
			},
			// 选择规格
			specificationSelection(index, gindex) {
				let cartList = this.cartList;
				// console.log(cartList[index].goods[gindex])
				this.isSelection = !this.isSelection
			},
			// 增加数量
			chooseAddNum(index, gindex) {
				let cartList = this.cartList; // 购物车商品列表
				let goods_num = cartList[index].goods[gindex].goods_num; // 获取当前数量
				goods_num = goods_num + 1; // 每点击一次加1
				cartList[index].goods[gindex].goods_num = goods_num; // 数量
				this.totalPrice()
			},
			// 减少数量
			chooseMinus(index, gindex) {
				let cartList = this.cartList; // 购物车商品列表
				let goods_num = cartList[index].goods[gindex].goods_num; // 获取当前数量
				if (goods_num <= 1) {
					return
				}
				goods_num = goods_num - 1; // 每点击一次加1
				cartList[index].goods[gindex].goods_num = goods_num;
				this.totalPrice()
			},
			// 选中商品删除
			chooseGoodsDelete() {
				uni.showModal({
					content: "确认将这个宝贝删除?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "删除",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("删除")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 选中商品移至收藏夹
			chooseGoodsEnshrine() {
				console.log("收藏")
			},
			// 清空失效商品
			chooseLoseEfficacyGoodsEmpty() {
				uni.showModal({
					content: "确认清空失效宝贝吗?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "清空",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("清空")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 计算总价
			totalPrice() {
				let cartList = this.cartList;
				let total = 0;
				let goods_num = 0;
				for (let i = 0; i < cartList.length; i++) {
					for (let j = 0; j < cartList[i].goods.length; j++) {
						if (cartList[i].goods[j].selected) {
							total += cartList[i].goods[j].goods_price * cartList[i].goods[j].goods_num;
							goods_num += cartList[i].goods[j].goods_num;
						}
					}
				}
				this.total = total;
			},
			// 店铺选中反选
			chooseShopSelect(index) {
				let cartList = this.cartList;
				cartList[index].isShop = !cartList[index].isShop;
				for (let i = 0; i < cartList[index].goods.length; i++) {
					cartList[index].goods[i].selected = cartList[index].isShop
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 商品选中反选
			chooseGoodsSelect(index, gindex) {
				let cartList = this.cartList;
				let count = 0;
				let goodsList = cartList[index].goods; // 当前店铺下商品列表
				let goods = goodsList[gindex]; // 当前商品数组

				if (goods.selected) {
					cartList[index].goods[gindex].selected = false; // 改变当前商品状态
					cartList[index].isShop = false; // 改变店铺状态
				} else {
					cartList[index].goods[gindex].selected = true;
					// 当店铺选中商品数量与店铺总数相等时, 改变店铺状态
					let shopGoodsNum = cartList[index].goods.length; // 店铺总个数
					let goodsArray = cartList[index].goods;
					let selectedNum = 0;
					for (var i in goodsArray) {
						if (goodsArray[i].selected) {
							selectedNum++
						}
					}
					if (selectedNum == goodsArray.length) {
						cartList[index].isShop = true
					} else {
						cartList[index].isShop = false
					}
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 全选条件 店铺全选  反之 
			checkAllCondition() {
				let isCheckAll = this.isCheckAll;
				let cartList = this.cartList; // 购物车列表数据
				let isCheckAllNum = 0;
				for (let i = 0; i < cartList.length; i++) {
					if (cartList[i].isShop == true) {
						isCheckAllNum++
					}
				}
				if (isCheckAllNum == cartList.length) {
					this.isCheckAll = true;
				} else {
					this.isCheckAll = false;
				}
				this.totalPrice()
			},
			// 点击全选
			chooseCheckAll() {
				let cartList = this.cartList;
				let isCheckAll = this.isCheckAll;
				if (isCheckAll) {
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
				}
				for (let i = 0; i < cartList.length; i++) {
					cartList[i].isShop = this.isCheckAll;
					for (let j = 0; j < cartList[i].goods.length; j++) {
						cartList[i].goods[j].selected = this.isCheckAll
					}
				}
				this.totalPrice()
			}
		}
	}
</script>

<style lang="scss">
	.cart {
		width: 100%;
		height: 100%;
	}

	.rightText {
		// font-size: $font-sm;
		padding-top: 3px;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFFF;

		.icongouwuche {
			width: 190upx;
		}

		.empty-tips {
			display: flex;
			// font-size: $font-sm + 2upx;
			// color: $font-color-disabled;

			.navigator {
				margin-left: 16upx;
			}
		}
	}

	.goods-list {
		.btn-clear {
			display: flex;
			justify-content: space-between;
			margin: 20upx 30upx 20upx 20upx;
			color: #35c3ff;
		}

		.yh-cart-row:last-child {
			margin: 0 30upx 120upx;
		}

		.yh-cart-row {
			background-color: #FFFFFF;

			.carrier:last-child {
				border-bottom: none;
			}

			.carrier {
				border-bottom: 1upx dashed #dcdcdc;

				.shop {
					display: flex;
					align-items: center;
					padding: 30upx 30upx;

					.left {
						display: flex;
						align-items: center;

						.select {
							width: 40upx;
							// margin-right: $spacing-base;
						}

						.shop-name {
							display: flex;
							align-items: center;

							.icon-shop {
								width: 42upx;
								// margin-right: $spacing-sm;
							}

							.name {
								// font-size: $font-lg;
								font-weight: 600;
							}
						}
					}

					.right {
						width: 30upx;
						// margin-left: $spacing-sm;
					}
				}

				.goods {
					display: flex;
					align-items: center;
					padding: 0 30upx 40upx;
					position: relative;

					.goods-lose-efficacy-identifying {
						width: 100upx;
						height: 100upx;
						position: absolute;
						z-index: 99;
						right: 0upx;
						margin-top: -75upx;
					}

					.left {
						.select {
							width: 40upx;
							// margin-right: $spacing-base;
						}
					}

					.right {
						display: flex;
						z-index: 2;

						.goods-image {
							width: 220upx;
							height: 220upx;
							margin-right: 20upx;
						}

						.goods-info {
							width: 400upx;
							padding-top: 10upx;

							.goods-name {
								font-size: 3.5vw;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									font-size: 3.5vw;
									// font-size: $font-sm;
									// color: $font-color-9;
								}

								.specification-image {
									width: 25upx;
									// margin-left: $spacing-sm;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;

								.price {
									color: #FD6E4C;

									.price-symbol {
										font-size: 20upx;
									}

									.price-marked {
										font-size: 20upx;
									}
								}

								.amount {
									display: flex;
									align-items: center;
									height: 40upx;

									.num-minus,
									.num-add {
										width: 50upx;
										text-align: center;
									}

									.num-minus {
										height: 50upx;
										background-color: #efefef;
										color: #030303;
										line-height: 50upx;
									}

									.num-add {
										height: 50upx;
										background-color: #35bcff;
										color: #fff;
										line-height: 50upx;
									}

									.input-price {
										width: 60upx;
										text-align: center;
									}
								}
							}
						}

						.goods-info-s {
							// 失效商品样式
							width: 400upx;
							padding-top: 10upx;

							.goods-names {
								// font-size: $font-th;
								// color: $font-color-9;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									// font-size: $font-sm;
									// color: $font-color-9;
								}

								.specification-image {
									width: 25upx;
									// margin-left: $spacing-sm;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;
								align-items: center;

								.goods-cause {
									// 商品失效原因
									// font-size: $font-sm;
									margin-top: 45upx;
								}

								.goods-similarity {
									// font-size: $font-sm;
									// color: $base-color;
									padding: 5upx 10upx;
									// border: 1upx solid $base-color;
									margin-top: 45upx;
									border-radius: 20upx;
								}
							}
						}
					}
				}

				.carrier-title {
					display: flex;
					justify-content: space-between;
					padding: 20upx 30upx 30upx;

					.goods-lose-efficacy-num {
						// font-size: $font-base;
						font-weight: 600;
					}

					.goods-lose-efficacy-operation {
						// font-size: $font-sm;
						padding-top: 4upx;
						// color: $base-color;
					}
				}
			}
		}
	}

	.goods-settle-accounts {
		height: 96upx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			padding-left: 10upx;

			.select {
				width: 40upx;
				// margin-right: $spacing-sm;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.goods-price-total {
				font-size: 26rpx;
			}

			.goods-price-total text:nth-child(2) {
				font-size: 30rpx;
				padding-top: 4upx;
				margin-left: 8upx;
				color: rgb(253, 110, 76);
			}

			.goods-count-btn {
				font-size: 32upx;
				width: 180upx;
				background-color: #35c3ff;
				color: #fff;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				margin-left: 20upx;
			}

			.goods-enshrine {
				// color: $base-color;
				padding: 5upx 20upx;
				// border: 1upx solid $base-color;
				border-radius: 30upx;
				margin-right: 30upx;
			}

			.goods-delete {
				padding: 5upx 20upx;
				color: #FD6E4C;
				border: 1px solid #FD6E4C;
				border-radius: 30upx;
				margin-right: 20rpx;
			}
		}
	}
</style>